<template>
  <div class="Body">
    <div class="leftBox">
      <div class="bigFont">
        学校关系图谱之学生流动
      </div>
      <div class="secBigFont">
        展示两校学生流动关系图谱，主要为第一院校升学（考研/考博）到另一院校的学生流动量，通过连接线条的数量、颜色表示。
      </div>
      <div class="searchBox">
        <button id="searchBtn">搜索</button>
        <input type="text" name="" id="searchInput" placeholder="请输入你想要查询的院校名称"/>
      </div>
    </div>
    <div class="rightBox">
      <img src="../assets/imgContext.jpg" alt="" />
    </div>
  </div>
</template>

<script>
// 定义Body组件
export default {
  name: "Body",
  data() {
    return {};
  },
  props: {
    msg: String
  }
};
</script>

<style scoped>
.Body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80vh;
}
.leftBox,
.rightBox {
  width: 40vw;
}
.rightBox {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.rightBox > img {
  height: 600px !important;
}
.leftBox{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 600px;
}
.bigFont {
  font-size: 60px;
  width: 420px;
  color: white;
}
.secBigFont{
  font-size: 20px;
  width: 580px;
  color: white;
}
.searchBox{
  height: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.searchBox>#searchBtn{
  border: none;
  height: 48px;
  width:160px;
  font-weight: 600;
  font-size: 16px;
  border-radius:5px 0 0 5px;
  background-color: #35BBED;
  color: #fff;
  cursor: pointer;
}
.searchBox>#searchBtn:focus{
  border: none;
  outline: none;
}
.searchBox>#searchBtn:active{
   transform: scale(0.9);
   transition: 0.3s;
}
.searchBox>#searchInput{
  background-color: transparent;
  border: 1px solid white;
  padding-left: 30px;
  height: 42px;
  width: 360px;
  color: white!important;
  cursor: pointer;
}
.searchBox>#searchInput:focus{
  outline: none;
}
/* WebKit browsers */
#searchInput::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: 16px;
}
/* Mozilla Firefox 4 to 18 */
#searchInput:-moz-placeholder {
    color: #C0C0C0;
    opacity: 1;
    font-size: 16px;
}
/* Mozilla Firefox 19+ */
#searchInput::-moz-placeholder {
    color: #C0C0C0;
    opacity: 1;
    font-size: 16px;
}
/* Internet Explorer 10+ */
#searchInput:-ms-input-placeholder {
    color: #C0C0C0;
    font-size: 16px;
}
</style>
